<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./js/jquery-3.5.1.min.js"></script>
<title>Document</title>
</head>
<style>
* {
  margin: 0;
  padding: 0;
}
.container {
  width: 600px;
  height: 700px;
  background-color: khaki;
  position: relative;
}

.text {
  width: 600px;
  height: 100px;
  background-color: #ccb;
}
.clear {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  position: absolute;
  top: 0;
  right: 0;
}
.clear button {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
}
.number {
  width: 450px;
  height: 450px;
}

.number button {
  width: 150px;
  height: 150px;
  background-color: lightcoral;
  display: block;
  float: left;
}
.signs {
  width: 150px;
  height: 600px;
  background-color: lightgreen;
  float: right;
  margin-top: -450px;
}
.signs button {
  width: 150px;
  height: 150px;
  background-color: lightcoral;
}
.equal {
  width: 300px;
  height: 150px;
  background-color: lightpink;
  margin-left: 150px;
}
.equal button {
  width: 300px;
  height: 150px;
  background-color: lightcoral;
}
</style>
<body>
<div class="container">
  <div class="text">
    <input
      type="text"
      style="width: 600px; height: 95px; font-size: 30px"
      class="show"
      ;id="showing"
    />
  </div>
  <div class="number">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>0</button>
  </div>
  <div class="signs">
    <button>+</button>
    <button>-</button>
    <button>*</button>
    <button>/</button>
  </div>
  <div class="equal">
    <button>=</button>
  </div>
  <div class="clear">
    <button>AC</button>
  </div>
</div>
<script>
  var num1 = "";
  var num2 = "";
  var sign = "";
  var res="";
  $(".number button").click(function () {
  
    var num = $(this).text();
    // console.log(num);单个数
    // console.log(Boolean(sign));结果是false
    if (sign) {
      num2 = num2 + num;
      // console.log(num1);
      // console.log(num2);
      // console.log(typeof num);都是String类型
      //num2是我们需要的字符串，num1和sign是空字符串。
      $(".show").val(num1+sign+num2);
    } else {
      if(res!==""){
        num1="";
        num2="";
        res="";
      }
      num1 = num1 + num;
      // console.log(num1);
      $(".show").val(num1);
    }
  });
  $(".signs button").click(function () {
    if(num2!==""){ 
    switch(sign){
      case "+":res=parseInt(num1)+parseInt(num2)
      num2="";
      break;
        case "-": res = parseInt(num1) - parseInt(num2)
        num2 = "";
        break;
          case "*": res = parseInt(num1) * parseInt(num2)
        num2 = "";
        break;
          case "/": res = parseInt(num1) / parseInt(num2)
        num2 = "";
        break;
    }
      num1 = res; 
    }
      sign = $(this).text();
      $(".show").val(num1 + sign)
    
  });
  $(".equal button").click(function () { 
      switch(sign){
        case "+":res=num1*1+num2*1;break;
        case "-": res = num1 * 1 - num2 * 1; break;
        case "*": res = num1 * 1 * num2 * 1; break;
        case "/": res = (num1 * 1) / (num2 * 1); break;
      }
      $(".show").val(res)
      num1=res;
      num2=""
      sign="";
  });
  // var ss = $(".show").val(); //val方法是获取输入域的值
  // console.log(ss);
  $(".clear button").click(function () {
    num1 = "";
    num2 = "";
    sign = "";
    $(".show").val("");
  });
</script>
</body>
</html>
